<template>
  <div class="systemgroupdata-page page-main">
    <search-form :model="searchParams" @search="query">
      <a-select v-model:value="searchParams.status" filterable clearable @change="query">
        <a-select-option v-for="item in STATUS_OPTION" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </search-form>
    <div class="table-toolbar">
      <add-button @click="add()" />
    </div>
    <a-table :dataSource="groupData">
      <a-table-column title="编号" data-index="id" />
      <a-table-column v-for="item, index in formConf.fields" :key="index" :title="item.__config__.label">
        <template #default="{ record }">
          <div v-if="['img', 'image', 'pic'].indexOf(item.__vModel__) > -1" class="demo-image__preview">
            <img style="width: 36px; height: 36px" :src="record[item.__vModel__]"
              :preview-src-list="[record[item.__vModel__]]">
          </div>
          <span v-else>{{ record[item.__vModel__] }}</span>
        </template>
      </a-table-column>
      <a-table-column title="状态" data-index="status">
        <template #default="{ record }">
          {{ record.status }}
        </template>
      </a-table-column>
      <a-table-column title="操作" data-index="brokerageTwo">
        <template #default="{ record }">
          <table-button @click="add(record)">编辑</table-button>
          <confirm-button danger @click="remove(record)">删除</confirm-button>
        </template>
      </a-table-column>
    </a-table>

    <systemgroupdataDetail v-model:visible="visible" :data="activeRow" @change="query(false)" />
  </div>
</template>

<script setup lang="ts">
import { systemgroupdataDel, getPageList, getFormConfigInfo } from './api';
import type { Isystemgroupdata } from './entity';
import systemgroupdataDetail from './detail.vue';
import { STATUS_OPTION } from '@/utils/constant';
const searchParams = reactive({
  gid: '',
  status: ''
})
let formcurId = $ref('')
const router = useRouter();
const route = useRoute();
let page = $ref(1)
let limit = $ref(10)
let formMark = $ref(0)
let formConf = $ref({})
onMounted(() => {
  let { id, formId } = route.query
  searchParams.gid = id as string
  formcurId = formId || '' as string
  query(false)
  handlerGetFormConfig()
})
let visible = $ref(false)
let groupData = $ref([])
async function query(bool: boolean) {
  if (bool) {
    page = 1
  }
  let { list } = await getPageList({ page, limit, ...searchParams })
  groupData = list.map((e: any) => {
    let tempval = JSON.parse(e.value)
    let { id, sort, status } = e
    const temp = {}
    tempval.fields.forEach((item: any) => {
      temp[item.name] = item.value
    })
    return { ...temp, id, sort, status, }
  })
}

let activeRow = $ref<Partial<Isystemgroupdata>>({})
function add(row: Partial<Isystemgroupdata> = {}) {
  activeRow = { ...row }
  visible = true
}

function remove({ id }: Isystemgroupdata) {
  systemgroupdataDel(id as number).then(() => {
    AntMessage.success('已删除')
    query(false)
  })
}
async function handlerGetFormConfig() { // 获取表单配置后生成table列
  let data = await getFormConfigInfo({ id: formcurId })
  formMark = parseInt(data.id);
  formConf = JSON.parse(data.content)
}
</script>

<style lang="scss"></style>